<!DOCTYPE html><html>
<head>
<title>Drag and Drop Example</title>
<style>
  .parent3{
    width: 30vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
	.box {
    width: 100px;
    height: 100px;
    color: white;
    font-size: 40px;
    margin: 10px;
    display: inline-block;
	}
  .box1 {
    grid-area: 1 / 1 / 2 / 2;
    background-color: #1F2A37;
    border-radius: 16px;
  }

  .box2 {
    grid-area: 1 / 2 / 2 / 3;
    background-color: #1F2A37;
    border-radius: 16px;
  }

  .box3 {
    grid-area: 1 / 3 / 2 / 4;
    background-color: #1F2A37;
    border-radius: 16px;
  }

  .box4 {
    grid-area: 2 / 1 / 3 / 2;
    background-color: #1F2A37;
    border-radius: 16px;
  }

  .box5 {
    grid-area: 2 / 2 / 3 / 3;
    background-color: #1F2A37;
    border-radius: 16px;
  }

  .box6 {
    grid-area: 2 / 3 / 3 / 4;
    background-color: #1F2A37;
    border-radius: 16px;
  }

  .box7 {
    grid-area: 3 / 1 / 4 / 2;
    background-color: #1F2A37;
    border-radius: 16px;
  }

  .box8 {
    grid-area: 3 / 2 / 4 / 3;
    background-color: #1F2A37;
    border-radius: 16px;
  }

  .box9 {
    grid-area: 3 / 3 / 4 / 4;
    background-color: #1F2A37;
    border-radius: 16px;
  }
</style>
</head>
<body>
  <div class="parent3">

    <div class="box box1" draggable="true">1</div>
    <div class="box box2" draggable="true">2</div>
    <div class="box box3" draggable="true">3</div>
    <div class="box box4" draggable="true">4</div>
    <div class="box box5" draggable="true">5</div>
    <div class="box box6" draggable="true">6</div>
    <div class="box box7" draggable="true">7</div>
    <div class="box box8" draggable="true">8</div>
    <div class="box box9" draggable="true">9</div>
  </div>
	
<script>
	var dragSrcEl = null;
 
	function handleDragStart(e) {
		console.log("开始拖动");
		dragSrcEl = this;
		e.dataTransfer.effectAllowed = 'move';
		e.dataTransfer.setData('text/html', this.innerHTML);
	}
 
	function handleDragOver(e) {
		console.log("移动元素");
		if (e.preventDefault) {
		e.preventDefault();
		}
		e.dataTransfer.dropEffect = 'move';
		return false;
	}
 
	function handleDrop(e) {
		console.log("松开鼠标");
		if (e.stopPropagation) {
		e.stopPropagation();
		}
    console.log('dragSrcEl',dragSrcEl)
		if (dragSrcEl != this) {
		dragSrcEl.innerHTML = this.innerHTML;
		this.innerHTML = e.dataTransfer.getData('text/html');
		}
		return false;
	}
 
	var boxes = document.querySelectorAll('.box');
	[].forEach.call(boxes, function(box) {
		box.addEventListener('dragstart', handleDragStart, false);
		box.addEventListener('dragover', handleDragOver, false);
		box.addEventListener('drop', handleDrop, false);
	});
 
</script>
</body>
</html>